<template>
	<view class="waterfall_wrap">
		<!-- 左边 -->
		<view class="waterfall_left">
			<!-- 内容插槽 contentLeftList传递参数 -->
			<slot name="LeftList" :contentLeftList="goodsLeftList" :LeftLoadMethods="onImageLoad"></slot>
			<!-- <view class="waterfall_list" v-for="(item,index) in goodsLeftList" :key="index">
				<image class="waterfall_list_img" :src="item.goods_main_pic" mode="widthFix" @load="onImageLoad"></image>
				<view class="msg_box">
					<view class="name single-omit">商品{{index}}</view>
					<view class="price-box flex-align-center">
						<view class="unit"><text>￥</text>{{index*10}}</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- 右边 -->
		<view class="waterfall_right">
			<!-- 内容插槽 contentRightist传递参数 -->
			<slot name="RightList" :contentRightist="goodsRightList" :RightLoadMethods="onImageLoad"></slot>
			<!-- <view class="waterfall_list" v-for="(item,index) in goodsRightList" :key="index">
				<image class="waterfall_list_img" :src="item.goods_main_pic" mode="widthFix" @load="onImageLoad"></image>
				<view class="msg_box">
					<view class="name single-omit">商品{{index}}</view>
					<view class="price-box flex-align-center">
						<view class="unit"><text>￥</text>{{index*10}}</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		name:"my-waterfall",
		props: {
			listData: { type: Array, required: true },
		},
		data() {
			return {
				goodsListCount: 0, //加载第i张图片
				// 左侧商品列表
				goodsLeftList: [],
				goodsLeftListHeight: 0,
				// 右侧商品列表
				goodsRightList: [],
				goodsRightListHeight: 0
			};
		},
		watch: { 
			listData: {
			    handler: function(data) {
			        data.length > 0 && this.waterfallImage();
			    },
			    immediate: true
			}
		},
		methods: {
			 // 图片绑定事件，通过比较左右列表高度，实现瀑布流展示
			    onImageLoad: function(e) {
			      let divWidth = 340; //显示的单栏宽度，我设为342rpx
			      let oImgW = e.detail.width; //图片原始宽度
			      let oImgH = e.detail.height; //图片原始高度
			      let rImgH = (divWidth * oImgH) / oImgW + 32; //根据宽高比计算当前载入的图片的高度
			      if (this.goodsListCount == 0) {
			        this.goodsLeftListHeight += rImgH; //第一张图片高度加到goodsLeftListHeight
			        this.goodsListCount++; //图片索引加1
			        this.goodsRightList.push(this.listData[this.goodsListCount]); //添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中
			      } else {
			        this.goodsListCount++; //图片索引加1
			        if (this.goodsLeftListHeight > this.goodsRightListHeight) {
			          //把图片的高度加到目前高度更低的栏中
			          this.goodsRightListHeight += rImgH; //第二张图片高度加到goodsRightListHeight
			        } else {
			          this.goodsLeftListHeight += rImgH;
			        }
			
			        if (this.goodsListCount < this.listData.length) {
			          //根据目前的栏高，把下一张图片，push到低的那栏
			          // if (this.goodsLeftListHeight > this.goodsRightListHeight) {
			          //   this.goodsRightList.push(this.listData[this.goodsListCount]);
			          // } else {
			          //   this.goodsLeftList.push(this.listData[this.goodsListCount]);
			          // }
					  //根据  this.goodsListCount+1 奇偶数 push到低的对应栏
					  if((this.goodsListCount+1) % 2==0){//偶数加在右边
						this.goodsRightList.push(this.listData[this.goodsListCount]);
					  }else{//奇数加在左边
						this.goodsLeftList.push(this.listData[this.goodsListCount]);
					  }
			        }
					console.log(this.goodsRightList,this.goodsLeftList,"测试")
			      }
			    },
				// 向商品列表添加第一张图片
				    async waterfallImage() {
				      this.goodsListCount = 0;
				      this.goodsLeftList.push(this.listData[0]);
				    }
		}
	}
</script>

<style scoped lang="scss">
.waterfall_wrap{
	padding:0px 10px;
	display:flex;
	justify-content: space-between;
	.waterfall_left,.waterfall_right{
		width:340rpx;
		
	}
}
</style>